<meta charset="UTF-8">
<div id="posi-report">
    <div class="report-item-header">
        <Row style="margin:10px;height: 35px;">
            <div style="float: left;">
                <span>{{$t("reportForm.selectTime")}}:</span>
                <date-picker 
                    type="daterange" 
                    :value="dateVal"
                    :editable="false"
                    :clearable="false"
                    @on-change="onChange" 
                    show-week-numbers 
                    style="width:300px"
                    placement="bottom-start"></date-picker>
            </div>
            <div style="float: left;height: 35px; line-height: 35px;margin-left: 20px;" class="spans-wrap">
                <span class="cursor-pointer" @click="handleSelectdDate(0)">{{$t("reportForm.toDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(1)">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(3)">{{$t("reportForm.threeDays")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(7)">{{$t("reportForm.sevenDays")}}</span>
            </div>     
        </Row>
        <Row style="margin:10px;height: 35px;">
            <div style="float: left;">
                <div style="height: 35px; line-height: 35px;">{{$t("reportForm.selectDev")}}:&nbsp;</div> 
            </div>
            <div style="float: left;position: relative;width: 300px;">
                <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                    <i-input v-model.trim="sosoValue"  icon="ios-search-outline" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" :placeholder="placeholder"></i-input>
                    <transition name="fade">
                        <ul class="search-item-wrapper" v-show="isShowMatchDev">
                            <li  class="demo-auto-complete-item" v-for="item in filterData">
                                <div class="demo-auto-complete-group" v-show="item.devices.length">
                                    <span>{{ item.groupname }}</span>
                                </div>
                                <div v-for="option in item.devices" :value="option.groupname" :key="option.groupname" class="ivu-select-item">
                                    <span :style="{color:option.isOnline ? '#33DAD0':'#B1BBC2'}" @click="sosoSelect(option)" class="demo-auto-complete-title">{{ option.title }}</span>
                                </div>
                            </li>
                        </ul>
                    </transition>
                </div>
            </div>
            <div style="margin-left:20px;float: left;">
                <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
            </div>
        </Row>
        <div style="margin:10px;">
            <i-table :columns="lastPosiColumns" :height="lastTableHeight" :data="lastPosiData" :loading="loading"></i-table>
        </div>
        <Modal v-model="trackDetailModal" fullscreen>
                <p slot="header" style="color:#f60;text-align:center">
                    <Icon type="ios-create-outline"></Icon>
                    <span>{{$t("reportForm.AddressDetails")}}-{{deviceName}}</span>
                </p>
                <div>
                    <i-table :columns="posiDetailColumns" :data="posiDetailData" :loading="loading" :height="posiDetailHeight"></i-table>  
                </div>
        </Modal> 
        <transition name="fade">
            <div v-show="mapModal" class="posi-map-wraper">
                <div class="map-modal" @click="mapModal=false"></div>
                <div class="inner-map-wraper">
                    <div class="posi-map-title">
                        {{$t("reportForm.seePosi")}}
                        <div class="map-close"></div>
                    </div>
                    <div id="posi-map"></div>
                </div>
            </div>
        </transition>
    </div>
</div>